<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="viewport"
        content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="format-detection" content="email=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/mui.min.css">
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/cdisplay.css">
    <script src="js/vue.js"></script>
    <script src="js/axios.js"></script>
    <title>名片展示</title>
</head>

<body>
    <header class="mui-bar mui-bar-nav head">
        <h1 class="mui-title nav-tit">名片展示</h1>
    </header>
    <main>
        <div id="app">
            <div class="mui-content main">
                <!--名片展示内容-->
                <div class="dy" v-for="(k,index) in date">
                    <div class="content">
                        <!--让内容靠中间显示-->
                        <div class="outside">
                            <!-- 排序和状态 -->
                            <div v-bind:class="[errorClass,k.isoverdue==2?activeClass:'']">{{k.isoverdue==2?'已过期':index+1>3?'未过期':'TOP.'+(index+1)}}</div>
                            <!--名片-->
                            <div class="imgBox" @click='jumpPage(k.id)'>
                                <img :src="k.image2" alt="" class="card">
                                <img :src="k.image2" alt="" class="card">
                            </div>
                            <!--名片名字-->
                            <div class="name">{{ k.title }}</div>
                            <!--浏览次数、点赞个数及评论-->
                            <div class="number">
                                <div class="n1">
                                    <!--浏览次数图片-->
                                    <img src="./images/icon_eye.png" alt="" class="img1">
                                    <!--浏览次数-->
                                    <p class="look">{{ k.browse }}</p>
                                </div>
                                <div class="n2">
                                    <!--点赞图片-->
                                    <!-- 收藏图片 -->
                                    <img src="./images/icon_shoucang.png" alt="" class="img2">
                                    <!--点赞次数-->
                                    <p class="dz">{{ k.collection }}</p>
                                    <!--操作选项卡-->
                                    <div class="card-pop" ref='imgData'>
                                        <div class="card-box">
                                            <li @click='collection(k.id,index)'>
                                                <img v-if='!k.collected' src="images/index_shoucang.png" alt="">
                                                <img v-else src="images/icon_shoucang.png" alt="">
                                                <span>收藏</span>
                                            </li>
                                            <img src="images/shuxian.png" alt="">
                                            <li @click='telephone(k.phone)'>
                                                <img src="images/index_tel.png" alt="">
                                                <span>电话</span>
                                            </li>
                                        </div>
                                    </div>
                                    <img src="./images/icon_more2.png" alt="" class="img3" @click='changeProp(k.id)'>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--图片与下一个图片之间的距离-->
                    <div class="jl"></div>
                </div>
            </div>
        </div>
    </main>
    <footer>
        <div class="foot">
            <a href="homepage.html">
                <img src="./images/icon_index.png" alt="首页">
                <span>首页</span>
            </a>
            <a href="cdisplay.html">
                <img src="./images/icon_shows.png" alt="名片展示">
                <span>名片展示</span>
            </a>
            <a href="personal.html">
                <img src="./images/icon_mys.png" alt="我的">
                <span>我的</span>
            </a>
        </div>
    </footer>
    <script src="js/mui.min.js"></script>
    <script type="text/javascript" charset="utf-8">
        const API_PROXY = 'https://bird.ioliu.cn/v1/?url='
        new Vue({
            el: '#app',
            data: {
                date: [],
                activeClass:'writeClass',
                errorClass:'topColor'
            },
            created() {
                // 请求渲染数据
                axios.post(API_PROXY + 'mingpian.32one.top/Index/Index/getAddrByIp').then(
                    res => {
                        axios.post(API_PROXY + 'mingpian.32one.top/Index/Index/getCardByProvinceid', {
                            provinceId: localStorage.getItem("sid")
                        }).then(res => {
                            if (res.data.code == -1) {
                                mui.toast(res.data.msg)
                            } else {
                                console.log(res.data.data)
                                // this.date = res.data.data
                                // res.data.data = [
                                //     {
                                //         id:103,
                                //         image2:"http://mingpian.32one.top/uploads/business/20190307/bcd07901a3035bdc35835ff92b8b87a8.jpg",
                                //         collected:false,
                                //         browse:24,
                                //         isoverdue:2,
                                //         title:'hhhhh',
                                //         Roof:1,
                                //         collection:0
                                //     },
                                //     {
                                //         id:104,
                                //         image2:"http://mingpian.32one.top/uploads/business/20190307/bcd07901a3035bdc35835ff92b8b87a8.jpg",
                                //         collected:false,
                                //         browse:24,
                                //         isoverdue:1,
                                //         title:'hhhhh',
                                //         Roof:1,
                                //         collection:0
                                //     },
                                //     {
                                //         id:105,
                                //         image2:"http://mingpian.32one.top/uploads/business/20190307/bcd07901a3035bdc35835ff92b8b87a8.jpg",
                                //         collected:false,
                                //         browse:24,
                                //         isoverdue:2,
                                //         title:'hhhhh',
                                //         Roof:1,
                                //         collection:0
                                //     },
                                //     {
                                //         id:106,
                                //         image2:"http://mingpian.32one.top/uploads/business/20190307/bcd07901a3035bdc35835ff92b8b87a8.jpg",
                                //         collected:false,
                                //         browse:24,
                                //         isoverdue:1,
                                //         title:'hhhhh',
                                //         Roof:1,
                                //         collection:0
                                //     },
                                //     {
                                //         id:107,
                                //         image2:"http://mingpian.32one.top/uploads/business/20190307/bcd07901a3035bdc35835ff92b8b87a8.jpg",
                                //         collected:false,
                                //         browse:24,
                                //         isoverdue:1,
                                //         title:'hhhhh',
                                //         Roof:1,
                                //         collection:0
                                //     }
                                // ]
                                for (var i = 0; i < res.data.data.length; i++) {
                                    // 判断过期
                                    if (res.data.data[i].isoverdue == 2) {
                                        this.date.push(res.data.data[i])
                                    } else {
                                        this.date.unshift(res.data.data[i])
                                    }
                                }
                            }
                        })
                    }
                )
            },
            methods: {
                // 跳转详情页
                jumpPage(id) {
                    // 跳转详情页
                    window.location.href = 'xiangqing.html?id=' + id
                },
                // 操作选项卡显示隐藏
                changeProp(index) {
                    for (var i = 0; i < this.date.length; i++) {
                        if (this.date[i].id == index) {
                            if (this.$refs.imgData[i].style.display == 'none') {
                                this.$refs.imgData[i].style.display = 'block'
                            } else {
                                this.$refs.imgData[i].style.display = 'none'
                            }
                        }
                    }
                },
                // 收藏
                collection(id, index) {
                    axios.post(API_PROXY + 'mingpian.32one.top/Index/Index/collect', {
                        cardId: id
                    }).then(res => {
                        // 判断是否已收藏
                        if (res.data.code == -1) {
                            // 已收藏则执行取消收藏
                            axios.post(API_PROXY + 'mingpian.32one.top/Index/Index/unCollect', {
                                cardId: id
                            }).then(res => {
                                // 提醒取消是否成功
                                mui.toast(res.data.msg)
                                this.date[index].collected = false
                                this.date[index].collection--
                            })
                        } else {
                            // 提醒收藏成功
                            mui.toast(res.data.msg)
                            this.date[index].collected = true
                            this.date[index].collection++
                        }
                    })
                    this.changeProp(id)
                },
                // 拨打电话
                telephone(tel) {
                    var a = document.createElement('a');
                    a.href = 'tel:' + tel;
                    a.click();
                }
            }
        })
    </script>
</body>

</html>